/**
 * Created by sq on 2016/11/24.
 */
var canva = document.getElementById("mycanvas");
canva.width=450;
canva.height=450;//canvas要首先用js语言生成一个，不能直接用css控制。如果js不生成，css控制的是默认大小的一个canvas，出现拉伸变形现象
content = canva.getContext('2d');
content.strokeStyle="#9a9a9a";
var me=true;
for(var i=15;i<450;i=i+30){
    content.moveTo(15,i);
    content.lineTo(435,i);
    content.moveTo(i,15);
    content.lineTo(i,435);
}
content.stroke();

canva.onclick=function (e) {
    var x=e.offsetX;//获取相对于canvas圆点的x轴坐标
    var y=e.offsetY;
    var i=Math.floor(x/30);//触发取整
    var r=Math.floor(y/30);

    oneStep(i,r,me);
    me=!me;
}
/* 画圆环或者圆中圆，官方叫渐变*/
function oneStep(x,y,me) {
    content.beginPath();
    content.arc(x*30+15,y*30+15,15,0,Math.PI*2,true);

    var grd=content.createRadialGradient(x*30+15,y*30+15,0,x*30+15,y*30+15,10);
    if(me){
        grd.addColorStop(0,"#ffffff");//白色 结合上面那句话，同一个圆心，白色远直径是零，灰色圆直径是10，最外面大圆直径是15。白色渐变，灰色也渐变就成了现在的样子
        grd.addColorStop(1,"#d9d9d9");//一种灰色
    }else {
        grd.addColorStop(0,"#636766");//0代表第一个圆，1代表第二个圆； 这个颜色值接近黑色
        grd.addColorStop(1,"#000000");//黑色
    }
    content.fillStyle=grd;
    content.fill();    //fill是填充，stroke只是画个线
}

/*画实心圆，留着用于跟画渐变圆对比*/
// function oneStep(x,y,me) {
//     content.beginPath();
//     content.arc(x*30+15,y*30+15,12,0,Math.PI*2,true);
//
//     if(me){
//         content.fillStyle='#000000';
//     }else {
//         content.fillStyle='#F9F9F9';
//     }
//     content.fill();    //fill是填充，stroke只是画个线
// }